<template>
  <a class="my-badge" :href="URL" target="_blank">
    <component :is="comp" />
    &nbsp;
    <span>{{ number }}</span>
  </a>
</template>

<script setup>
import { useThemeLocaleData } from "@vuepress/theme-default/lib/client/composables";
import { ref } from "vue";

const props = defineProps({
  comp: {
    type: Object,
    required: true,
  },
  data: {
    type: Number,
    required: true,
  },
});

const number = ref(0);

// add number to number until number is equal to data
var t = setInterval(() => {
  number.value += 234;
  if (number.value >= props.data) {
    number.value = props.data;
    clearInterval(t);
  }
}, 1);

const themeData = useThemeLocaleData();
const repoURL = `https://github.com/${themeData.value.repo}`;
const repoStarsURL = repoURL;
const repoForksURL = `${repoURL}/fork`;

let URL = repoURL;
switch (props.comp.name) {
  case "Star":
    URL = repoStarsURL;
    break;
  case "Fork":
    URL = repoForksURL;
    break;
}
</script>

<style lang="scss" scoped>
.my-badge {
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  padding: 5px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--c-text);
  background-color: rgba(89, 95, 101, 0.2);
  user-select: none;
}

@media (max-width: 719px) {
  .my-badge {
    margin: 0 5px;
  }
}
</style>
